<template>
<Form ref="form" :model="form" :rules="rule" :label-width="80">
  <FormItem label="旧密码" prop="oldPassword">
    <Input :type="iconEyeOff[0] ? 'text' : 'password'" v-model="form.oldPassword" placeholder="">
       <a @click.prevent="changeIcon(0)" slot="suffix"><Icon :type="iconEyeOff[0] ? 'md-eye-off': 'md-eye'" /></a>
    </Input>
  </FormItem>
  <FormItem label="新密码" prop="newPassword">
    <Input :type="iconEyeOff[1] ? 'text' : 'password'" v-model="form.newPassword" placeholder="">
       <a @click.prevent="changeIcon(1)"  slot="suffix"><Icon :type="iconEyeOff[1] ? 'md-eye-off': 'md-eye'" /></a>
    </Input>
  </FormItem>
  <FormItem label="确认密码" prop="confirmPassword">
    <Input :type="iconEyeOff[2] ? 'text' : 'password'" v-model="form.confirmPassword" placeholder="">
       <a @click.prevent="changeIcon(2)" slot="suffix"><Icon :type="iconEyeOff[2] ? 'md-eye-off': 'md-eye'" /></a>
    </Input>
  </FormItem>
</Form>
</template>
<script>
import { changePassword } from '@/api/ums/ums.personal.service.js'
export default {
  data () {
    const validateConfirmPassword = (rule, value, callback) => {
      let errors = []
      if (this.form.newPassword !== value) {
        errors.push(new Error('密码不一致'))
      }
      callback(errors)
    }
    const validateNewPassword = (rule, value, callback) => {
      let errors = []
      if (this.form.oldPassword === value) {
        errors.push(new Error('新密码与旧密码不能相同'))
      }
      callback(errors)
    }
    return {
      iconEyeOff: [false, false, false],
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rule: {
        oldPassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' } // ,
          // { pattern: /^[a-zA-Z0-9_!@#$%^&*?-]{4,16}$/, message: '密码4到16位（字母，数字，下划线，特殊字符!@#$%^&*?）', trigger: 'blur' }
          // { pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/, message: '密码最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: validateNewPassword
          } // ,
          // { pattern: /^[a-zA-Z0-9_!@#$%^&*?-]{4,16}$/, message: '密码4到16位（字母，数字，下划线，特殊字符!@#$%^&*?）', trigger: 'blur' }
          // { pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/, message: '密码最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: validateConfirmPassword
          }
        ]
      }
    }
  },
  methods: {
    changeIcon (index) {
      this.$set(this.iconEyeOff, index, !this.iconEyeOff[index])
    },
    submit () {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            changePassword(this.form).then(res => {
              resolve(res)
            }).catch(e => {
              reject(e)
            })
          } else {
            reject(new Error('error'))
          }
        })
      })
    }
  }
}
</script>
